<template>
  <div class="wrapper">
    <el-card class="box-card">
      <div class="wrapper_content">
        <div class="list">
          <div class="item">
            <div class="title">项目人天统计</div>
            <div class="legend_list">
              <div v-for="(item, index) of peoplesLegend" :key="index" class="legend_item">
                <div class="icon" :style="{'background': `${item.color}`}" />
                {{ item.name }}
              </div>
            </div>
            <div class="legend" />
            <div id="peoples" class="item_1" />
          </div>
          <div class="item">
            <div class="title">项目实时人天进度表</div>
            <div class="legend_list">
              <div v-for="(item, index) of differentLegend" :key="index" class="legend_item">
                <div class="icon" :style="{'background': `${item.color}`}" />
                {{ item.name }}
              </div>
            </div>
            <div id="progress" class="item_1" />
          </div>
        </div>
        <div class="list">
          <div class="item">
            <div class="title">预算/实际差异人天</div>
            <div class="legend_list">
              <div v-for="(item, index) of progressLegend" :key="index" class="legend_item">
                <div class="icon" :style="{'background': `${item.color}`}" />
                {{ item.name }}
              </div>
            </div>
            <div id="differences" class="item_1" />
          </div>
          <div class="item">
            <div class="title">燃尽图</div>
            <div id="figure" class="item_1" />
          </div>
        </div>
        <div class="list">
          <div class="item" style="width: 100%">
            <div class="title">项目工作量趋势图</div>
            <div id="workLoad" class="item_1" />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { http_projectMandayStatisticsChart_info, http_projectWorkloadTrendChart_info, http_projectBurndownChart_info } from '@/api/viewProject'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')
import { colorList, baseBarWidth } from '@/utils'
export default {
  data() {
    return {
      peoplesLegend: [
        {
          color: colorList[1],
          name: '总人天'
        },
        {
          color: colorList[0],
          name: '已完成'
        }
      ],
      progressLegend: [
        {
          color: colorList[1],
          name: '计划人天'
        },
        {
          color: colorList[0],
          name: '实际已完成人天'
        }
      ],
      differentLegend: [
        {
          color: colorList[1],
          name: '计划人天'
        },
        {
          color: colorList[0],
          name: '已完成人天'
        }
      ],
      proId: null,
      proNo: null,
      peoplesData: [],
      baseBarWidth,
      colorList
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // this.initPeoples()
      // this.initProgress()
      // this.initDifferences()
      // this.initFigure()
      // this.initWorkLoad()
      this.proId = this.$route.query.id
      this.proNo = this.$route.query.proNo
      this.$nextTick(() => {
        this.getStatisticsChart() // 项目人天统计
        this.getWorkLoad() // 项目工作量趋势图
        this.getProjectBurndownChart() // 燃尽图
      })
    },
    /**
     * 项目人天统计
     */
    getStatisticsChart() {
      const params = {
        proId: this.proId,
        proNo: this.proNo,
        type: '1'
      }
      const params1 = {
        proId: this.proId,
        proNo: this.proNo,
        type: '2'
      }
      Promise.all([http_projectMandayStatisticsChart_info(params), http_projectMandayStatisticsChart_info(params1)]).then(res => {
        if (Array.isArray(res)) {
          const result = res.map(item => item.data) || []
          this.peoplesData = result
          // console.log(this.peoplesData);
          this.$nextTick(() => {
            this.initPeoples(result)
            this.initProgress(result)
            this.initDifferences(result)
          })
        }
      })
    },
    /**
     * 项目工作量趋势图
     */
    getWorkLoad() {
      const params = {
        proId: this.proId,
        proNo: this.proNo
      }
      http_projectWorkloadTrendChart_info(params).then(res => {
        const { data } = res
        if (Array.isArray(data)) {
          this.initWorkLoad(data)
        }
      })
    },
    /**
     * 燃尽图
     */
    getProjectBurndownChart() {
      const params = {
        proId: this.proId,
        proNo: this.proNo
      }
      http_projectBurndownChart_info(params).then(res => {
        const { data } = res
        if (Array.isArray(data)) {
          this.initFigure(data)
        }
      })
    },
    initPeoples(data) {
      const option_1 = {
        color: [this.colorList[0], this.colorList[0], this.colorList[1]],
         xAxis: {
                 type: 'category',
                 data: (function() {
            return data[0].map(item => item.text)
          })(),
          axisLabel: {
                            interval:0,
                            rotate: -20,
                            formatter: function (name) {
                                    return (name.length > 6 ? (name.slice(0,6)+"...") : name );
                            },
                    },
         },
          axisLabel : {//坐标轴刻度标签的相关设置。
                        formatter : function(params){
                            var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 10;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }

                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                        }

          },

        yAxis: {
          type: 'value'
        },
        // dataZoom: [{
        //     type: 'slider',
        //     show: true,
        //     xAxisIndex: [0],
        //     left: '9%',
        //     bottom: -5,
        //     start: 10,
        //     end: 90 //初始化滚动条
        // }],
        // 图例配置
        legend: {
          data: ['按成员', '按岗位'],
          selectedMode: 'single', // 设置单选模式
          icon: 'circle'
        },
        series: [
          {
            name: '按成员',
            data: (function() {
              return data[0].map(item => item.done? item.done : '') || []
            })(),
            type: 'bar',
            barWidth: this.baseBarWidth,
            barGap: 0,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  }
                }
              }
            },
            emphasis: {
              itemStyle: {
                color: this.colorList[0]
              }
            }
          },
          {
            data: (function() {
              return data[1].map(item => item.done ? item.done : '') || []
            })(),
            type: 'bar',
            name: '按岗位',
            barWidth: this.baseBarWidth,
            barGap: 0,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  }
                }
              }
            }
          },
          {
            data: (function() {
              return data[0].map(item => item.total ? item.total : '') || []
            })(),
            type: 'bar',
            name: '计划人天',
            z: 0,
            barWidth: this.baseBarWidth,
            barGap: 0,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  }
                }
              }
            }
          }
        ]
      }

      const myChart = echarts.init(document.getElementById('peoples'))
      myChart.setOption(option_1)
      const _this = this
      myChart.on('legendselectchanged', function(obj) {
        const name = obj.name
        const option = myChart.getOption()
        if (name === '按成员') {
          option.xAxis[0].data = _this.peoplesData[0].map(item => item.text)
          option.series[2] = _this.togglePeopsleSeries(0)

        } else {
          option.xAxis[0].data = _this.peoplesData[1].map(item => item.text)
          option.series[2] = _this.togglePeopsleSeries(1)
        }
        myChart.setOption(option)
      })
    },
    togglePeopsleSeries(index) {
      return {
        name: '计划人天',
        type: 'bar',
        data: this.peoplesData[index].map(item => item.total?item.total:''),
        normal: {
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: { // 数值样式
              color: 'red',
              fontSize: 14
            }
          }
        }
      }
    },
     togglePeopsleSeriesFinish(index) {
      return {
        name: '已完成人天',
        type: 'bar',
        data: this.peoplesData[index].map(item => item.done? item.done : '0'),
        normal: {
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: { // 数值样式
              color: 'red',
              fontSize: 14
            },
            formatter: function (value) {
              return value.data==0?'':value.data;
            }
          }
        }
      }
    },

     togglePeopsleSeriesFinishRel(index) {
      return {
        name: '实际已完成人天',
        type: 'bar',
        data: this.peoplesData[index].map(item => item.realDone? item.realDone : '0'),
        normal: {
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: { // 数值样式
              color: 'red',
              fontSize: 14
            },
            formatter: function (value) {
              return value.data==0?'':value.data;
            }

          }
        }
      }
    },


    initProgress(dataSource = []) {
      // console.log(dataSource);
      const option_1 = {
        tooltip: {
          trigger: 'axis'
        },
        color: [this.colorList[0], this.colorList[0], this.colorList[1]], // 配置图例颜色
        // 图例配置
        legend: {
          data: ['按成员', '按岗位'],
          selectedMode: 'single', // 设置单选模式
          icon: 'circle'
        },
        // X轴属性
          xAxis: {
                 type: 'category',
                 data: (function() {
            return dataSource[0].map(item => item.text)
          })(),
          axisLabel: {
                            interval:0,
                            rotate: -20,
                            formatter: function (name) {
                                    return (name.length > 6 ? (name.slice(0,6)+"...") : name );
                            },
                    },
         },
          axisLabel : {//坐标轴刻度标签的相关设置。
                        formatter : function(params){
                            var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 10;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }

                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                        }

          },


        // y轴属性
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '按成员',
            type: 'bar',
            // stack: '天数',
            barGap: '-100%',
            // data: (function() {
            //      return dataSource[0].map(item => item.done ? item.done : '')
            // })(),
            barWidth: this.baseBarWidth,
            z: 10,
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true, // 开启显示
            //       position: 'top', // 在上方显示
            //         // offset: [25,25],
            //       textStyle: { // 数值样式
            //         color: 'black',
            //         fontSize: 14
            //       }
            //     }
            //   }
            // },
          },
          {
            name: '按岗位',
            type: 'bar',
            // stack: '天数',
            barGap: '-100%',
            // data: (function() {
            //   return dataSource[1].map(item => item.done ? item.done : '')
            // })(),
            z: 10,
            barWidth: this.baseBarWidth,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                    // offset: [25,25],
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  }
                }
              }
            }
          },

             {
            data: (function() {
              return dataSource[0].map(item => item.total ? item.total : '0') || []
            })(),
            type: 'bar',
            name: '计划人天',
            z: 0,
            barWidth: this.baseBarWidth,
            barGap: '-100%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  //  offset: [25,25],
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  },
                      formatter: function (value) {
                    return value.data==0?'':value.data;
                  }

                }
              }
            }
          },

             {
            data: (function() {
              return dataSource[0].map(item => item.done ? item.done : '0') || []
            })(),
            type: 'bar',
            name: '已完成人天',
            z: 0,
            barWidth: this.baseBarWidth,
            barGap: '-100%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  },

                  formatter: function (value) {
                    return value.data==0?'':value.data;
                  }
                }
              }
            }
          },

        ]
      }
      const myChart = echarts.init(document.getElementById('progress'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option_1)
      const _this = this
      myChart.on('legendselectchanged', function(obj) {
        const name = obj.name
        const option = myChart.getOption()
        if (name === '按成员') {
          option.xAxis[0].data = _this.peoplesData[0].map(item => item.text)
          option.series[2] = _this.togglePeopsleSeries(0)
          option.series[3] = _this.togglePeopsleSeriesFinish(0)
        } else {
          option.xAxis[0].data = _this.peoplesData[1].map(item => item.text)
          option.series[2] = _this.togglePeopsleSeries(1)
          option.series[3] = _this.togglePeopsleSeriesFinish(1)
        }


        myChart.setOption(option)
      })
    },
    initDifferences(dataSource = []) {
      // console.log(dataSource);
      const option_1 = {
        tooltip: {
          trigger: 'axis'
        },
        color: [this.colorList[0], this.colorList[0], this.colorList[1]], // 配置图例颜色
        // 图例配置
        legend: {
          data: ['按成员', '按岗位'],
          selectedMode: 'single', // 设置单选模式
          icon: 'circle'
        },
        // X轴属性
        // xAxis: {
        //   type: 'category',
        //   data: (function() {
        //     return dataSource[0].map(item => item.text)
        //   })(),
        //   axisLabel: {
        //     interval: 0,
        //     formatter:function(value)
        //     {
        //       return value.split("").join("\n")
        //     }
        //   }
        // },

             xAxis: {
                 type: 'category',
                 data: (function() {
            return dataSource[0].map(item => item.text)
          })(),
          axisLabel: {
                            interval:0,
                            rotate: -20,
                            formatter: function (name) {
                                    return (name.length > 6 ? (name.slice(0,6)+"...") : name );
                            },
                    },
         },
          axisLabel : {//坐标轴刻度标签的相关设置。
                        formatter : function(params){
                            var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 10;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }

                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                        }

          },


        // y轴属性
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '按成员',
            type: 'bar',
            // stack: '天数',
            barGap: '-100%',
            // data: (function() {
            //   return dataSource[0].map(item => item.realDone ? item.realDone : '')
            // })(),
            barWidth: this.baseBarWidth,
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true, // 开启显示
            //       position: 'top', // 在上方显示
            //         // offset: [25,25],
            //       textStyle: { // 数值样式
            //         color: 'black',
            //         fontSize: 14
            //       }
            //     }
            //   }
            // },
            emphasis: {
              itemStyle: {
                color: this.colorList[0]
              }
            }
          },

             {
            name: '按岗位',
            type: 'bar',
            // stack: '天数',
            barGap: '-100%',
            // data: (function() {
            //   return dataSource[1].map(item => item.done ? item.done : '')
            // })(),
            z: 10,
            barWidth: this.baseBarWidth,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                    // offset: [25,25],
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  }
                }
              }
            }
          },

                  {
            data: (function() {
              return dataSource[0].map(item => item.total ? item.total : '') || []
            })(),
            type: 'bar',
            name: '计划人天',
            z: 0,
            barWidth: this.baseBarWidth,
            barGap: '-100%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  //  offset: [25,25],
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  }
                }
              }
            }
          },

          {
            data: (function() {
              return dataSource[0].map(item => item.realDone ? item.realDone : '0') || []
            })(),
            type: 'bar',
            name: '实际已完成人天',
            z: 0,
            barWidth: this.baseBarWidth,
            barGap: '-100%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 14
                  },
                     formatter: function (value) {
                    return value.data==0?'':value.data;
                  }

                }
              }
            }
          },

        ]
      }
      const myChart = echarts.init(document.getElementById('differences'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option_1)
      const _this = this
      myChart.on('legendselectchanged', function(obj) {
        const name = obj.name
        const option = myChart.getOption()
        if (name === '按成员') {
          option.xAxis[0].data = _this.peoplesData[0].map(item => item.text)
          option.series[2] = _this.togglePeopsleSeries(0)
          option.series[3] = _this.togglePeopsleSeriesFinishRel(0)
        } else {
          option.xAxis[0].data = _this.peoplesData[1].map(item => item.text)
          option.series[2] = _this.togglePeopsleSeries(1)
          option.series[3] = _this.togglePeopsleSeriesFinishRel(1)
        }
        myChart.setOption(option)
      })
      // const _this = this
    },
    initFigure(dataSource) {
      const month = []
      dataSource.map(item => !month.includes(item.date.substring(0, 7)) && month.push(item.date.substring(0, 7)))
      const option = {
        color: ['#ccc', '#1f2d3d'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          data: (function() {
            return dataSource.map(item => item.date.substring(5, item.date.length))
            // return month
          })()
        },
        yAxis: {
          splitLine: {
            show: false
          },
          type: 'value',
          splitNumber: 3
        },
        series: [
          {
            name: '计划剩余人天',
            type: 'line',
            data: (function() {
              return dataSource.map(item => item.totalPlan)
            })(),
            // data: [10, 9, 8, 7, 6, 5, 4, 2, 1, 0],
            symbol: 'none', // 移除拐点默认圆圈
            itemStyle: {
              normal: {
                // 折点颜色样式
                color: 'orange',
                lineStyle: {
                  // 折线颜色样式
                  width: 2,
                  color: 'orange',
                  type: 'dashed'
                }
              }
            }
          },
          {
            name: '实际剩余人天',
            type: 'line',
            data: (function() {
              return dataSource.map(item => item.totalReal)
            })(),
            // data: [9, 7, 6, 5, 4, 2, 0],
            symbol: 'none', // 移除拐点默认圆圈
            itemStyle: {
              normal: {
                // 折点颜色样式
                color: 'red',
                lineStyle: {
                  // 折线颜色样式
                  width: 2,
                  color: 'red',
                  type: 'dashed'
                }
              }
            }
          }
        ]
      }
      const myChart = echarts.init(document.getElementById('figure'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    initWorkLoad(dataSource) {
      const month = []
      dataSource.map(item => !month.includes(item.date.substring(0, 7)) && month.push(item.date.substring(0, 7)))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          data: (function() {
            return dataSource.map(item => item.date.substring(5, item.date.length))
            // return month
          })()
        },
        yAxis: {
          splitLine: {
            show: false
          },
          type: 'value',
          splitNumber: 3
        },
        series: [
          {
            name: '任务量',
            type: 'line',
            data: (function() {
              return dataSource.map(item => item.totalInputHours)
            })(),
            smooth: true,
            symbol: 'none', // 移除拐点默认圆圈
            itemStyle: {
              normal: {
                // 折点颜色样式
                color: 'orange',
                lineStyle: {
                  // 折线颜色样式
                  width: 2,
                  color: 'orange'
                  // type:'solid'
                }
              }
            }
          }
        ]
      }
      const myChart = echarts.init(document.getElementById('workLoad'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
  &_content{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    .list{
      display: flex;
      flex-direction: row;
      flex: 1;
      .item{
        display: flex;
        flex-direction: column;
        width: 50%;
        padding: 20px;
        border: 1px solid #ccc;
        min-height: 400px;
        border-bottom: 0px;
        .title{
          font-weight: bold;
        }
        .item_1{
          width: 100%;
          height: 300px;
        }
        .legend_list{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-self: center;
          margin: 10px 0;
          .legend_item{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            margin-right: 10px;
            font-size: 14px;
            .icon{
              width: 14px;
              height: 14px;
              align-self: center;
              margin-right: 6px;
              // border-radius: 5px;
            }
          }
        }
      }
      .item:not(:first-child){
        border-left: 0px;
      }
    }
  }
}
</style>
